<script lang="ts" setup>
interface MenuType {
  id: number,
  title: string,
  engTitle?: string,
  path?: string
  children?: MenuType[]
}

const props = defineProps<{
  arr: MenuType[]
}>()

// 哪些格子被打开了
const openArr = reactive(
    props.arr.filter(item => checkChildren(item.children))
        .map(item => ({id: item.id, open: false}))
)

function checkChildren(item: any[] | undefined) {
  return item && item.length > 0
}

// 打开下拉框
function toggleItem(id: number) {
  const result = openArr.find(item => item.id === id)
  if (result) {
    result.open = !result.open
  }
}

function checkOpen(id: number) {
  return openArr.find(item => item.id === id)?.open
}

</script>
<template>
  <ul class="ul">
    <li v-for="item in arr" :key="item.id" class="li">
      <div class="title" @click="toggleItem(item.id)">
        <div class="title-top">
          <div class="title-cn">{{ item.title }}</div>
          <p v-if="checkChildren(item.children) && !checkOpen(item.id)" class="arrow">∨</p>
          <p v-else-if="checkChildren(item.children) && checkOpen(item.id)" class="arrow">∧</p>
          <p v-else class="arrow visibility" style="visibility: hidden">∨</p>
        </div>
        <div class="title-eng">{{ item.engTitle }}</div>
      </div>
      <ul v-if="checkChildren(item.children) && checkOpen(item.id)" class="sub-ul">
        <li v-for="subItem in item.children" :key="subItem.id" class="sub-li">
          <a class="sub-title">{{ subItem.title }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;

  .li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.6em 0.6em 0.8em;
      width: 100%;

      &:hover {
        background-image: linear-gradient(90deg, #2fa6fe, #92f2ff);
      }


      .title-top {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.6em 0;

        .title-cn {
          font-size: 1.4em;
          color: rgba(255, 255, 255, 0.86);
          font-weight: bold;
        }

        .arrow {
          transform: scaleX(1.5);
          font-weight: bold;
          align-self: center;
          padding-left: 0.4em;
        }
      }

      .title-eng {
        transform: scale(0.58);
        line-height: 0.4;
        opacity: 0.5;
      }
    }

    .sub-ul {
      display: flex;
      width: 100%;
      flex-direction: column;
      text-align: center;
      padding: 0;

      .sub-li {
        width: 100%;

        &:hover {
          background-image: linear-gradient(90deg, #2bc7ff, #2d68c2);
        }

        .sub-title {
          font-size: 1.3em;
          color: rgba(255, 255, 255, 0.86);
          font-weight: bold;
          display: block;
          padding: 0.4em;
        }
      }
    }
  }
}
</style>